<template>
  <div>
    <van-search v-model="keyword" shape="round" @keydown.enter="search" />
    <!-- 历史记录部分 -->
    <div class="historyKeyword" :style="{ margin: '10px 0' }">
      <span :style="{ fontSize: '17px', color: '#333' }">历史记录 :</span
      ><van-tag
        round
        type="primary"
        :style="{ margin: '5px 5px', fontSize: '16px' }"
        v-for="(item, index) in historyKeywordList"
        :key="index"
        >{{ item }}</van-tag
      >
      <van-tag round type="warning" :style="{ margin: '5px 5px', fontSize: '16px'}" v-show="historyKeywordList.length" @click="deleteHistory">删除</van-tag>
    </div>
  <!-- 热搜词部分 -->
    <div class="hotKeyword" :style="{ margin: '10px 0' }">
      <span :style="{ fontSize: '17px', color: '#333' }">热 词 :</span
      ><van-tag
        round
        type="primary"
        :style="{ margin: '5px 5px', fontSize: '14px' }"
        v-for="(item, index) in hotKeywordList"
        :key="index"
        >{{ item.keyword }}</van-tag
      >
    </div>
    <!-- 搜索结果展示区 -->
    <div><h3>搜索结果:</h3></div>
    
    <van-row type="flex" justify="space-between" :style="{ marginTop: '10px'}">
      <van-col
        span="11"
        :style="{ marginBottom: '5px' }"
        v-for="item in goodsList"
        :key="item.id"
      >
        <img
          :style="{
            borderRadius: '10px',
            width: '100%',
            backgroundColor: 'rgb(192, 192, 192)',
          }"
          :src="item.list_pic_url"
          alt=""
        />
        <div
          :style="{
            width: '100%',
            backgroundColor: '#eee',
            borderRadius: '10px',
          }"
        >
          <div :style="{ textAlign: 'center', fontSize: '16px' }">
            {{ item.name }}
          </div>
          <div
            :style="{ color: 'crimson', textAlign: 'center', fontSize: '14px' }"
          >
            ￥{{ item.retail_price }}.00元
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { searchInitData ,deleteHistory} from "../api/index";
export default {
  naem: "Search",
  data() {
    return {
      keyword: "",
      goodsList: [],
      hotKeywordList: [], //热搜词
      historyKeywordList: [], //历史搜索记录
    };
  },
  async mounted() {
    this.searchInitData();
  },
  methods: {
    //   根据输入框输入的内容获取对应的模糊查询数据
    async search() {
      // 根据关键词返回的额搜索内容
      // 清空数据
      this.goodsList = []
      const data = {keyword:this.keyword,page:1,size:10,order:'desc'}
      const result = await this.$API.searchData(data);
      this.goodsList = result.data.data;
      if(this.historyKeywordList.indexOf(this.keyword) !== 1){
        this.historyKeywordList.unshift(this.keyword)
      }
    },
    //页面初始化的数据
    async searchInitData() {
      const result = await searchInitData();
      // console.log(result);
      if (result.errno === 0) {
        const { keyword } = result.data.defaultKeyword;
        this.keyword = keyword;
        this.hotKeywordList = result.data.hotKeywordList;
        this.historyKeywordList = result.data.historyKeywordList;
      }
    },
    // 点击删除按钮,删除历史记录
    async deleteHistory(){
      const result = await deleteHistory()
      if(result.errno === 0){
        this.historyKeywordList=[]
      }
    }
  },
};
</script>

<style scoped>
</style>